<template>
  <div class="home">
    <Appheader :parentToChild="ymname" ref="loginStatus"></Appheader>
    <div class="home_content" v-loading="loading">
      <!-- 导航 -->
      <div class="nav-wrap">
        <div class="nav w">
          <div class="nav_div flex">
            <div class="navleft">
              <p class="flex">
                <!-- <img src="../assets/all_kaoshi.png" alt />
                全部考试 -->
                <img class="logo" src="../assets/logo.png" alt />
              </p>
              <ul class="f_ul">
                <div>
                  <p>各省统考</p>
                  <!-- <img src="../assets/allkaoshi_downred.png" alt /> -->
                  <div class="out_hidden">
                    <div class="over_hidden">
                      <div class="over_li">
                        <li
                          v-for="(list_f,list_index) in xuankelist"
                          :key="list_index"
                          @click="listf(0,list_f.id,list_f.name)"
                        >{{list_f.name}}</li>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <p>名校校招</p>
                  <!-- <img src="../assets/allkaoshi_downred.png" alt /> -->
                  <div class="out_hidden">
                    <div class="over_hidden">
                      <div class="over_li">
                        <li
                          v-for="(list_w,list_index) in xuankelist"
                          :key="list_index"
                          @click="listf(1,list_w.id,list_w.name)"
                        >{{list_w.name}}</li>
                      </div>
                    </div>
                  </div>
                </div>
              </ul>
            </div>
            <div class="navright">
              <div class="flex home_nav">
                <div class="active" @click="homeitem('首页')">首页</div>
                <div @click="homeitem('艺考选课')">艺考选课</div>
                <div @click="homeitem('艺考图书')">艺考图书</div>
                <div @click="homeitem('授课名师')">授课名师</div>
                <div @click="homeitem('免费试听')">免费试听</div>
                <div @click="homeitem('高校招生简章')">高校招生简章</div>
              </div>
              <div class="home_nav_tou">
                <div class="home_swiper">
                  <el-carousel arrow="never">
                    <el-carousel-item v-for="(itemswiper,iswiper) in swiper" :key="iswiper">
                      <img :src="itemswiper.url" alt class="swiper_url" @click="to_img_detail(itemswiper.photo)" />
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div class="tou_news">
                  <div class="top">
                    <img src="../assets/toutiao.png" alt />
                    <p>查看更多>></p>  
                  </div>
                  <div class="news_con">
                    <div
                      v-for="(news,index) in listarry3"
                      :key="index"
                      class="flex"
                      @click="zxdetail(news.id)"
                    >
                      <!-- <span class="cycle"></span> -->
                      <p class="hidden">{{news.title}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="classfiy_home">
        <div class="classfy_a" style="padding-top:36px;">
          <div class="flex a_top a_top2">
            <div class="left_line flex">
              <!-- <img src="../assets/mingshi.png" alt class="mingshi" /> -->
              授课名师
            </div>
            <div class="right_more flex" @click="saw_more(1)">
              更多名师>>
              <!-- <img src="../assets/goback.png" alt class="see_more" /> -->
            </div>
          </div>
          <!-- <div style="width: 1200px;height: 350px;position: relative; overflow:hidden;"> -->
          <div style="width: 1200px; height: 350px;position: relative; overflow:hidden;">
            <!-- <div v-for="(list, index) in techerList" :key="index"> -->
            <ul
              class="a_bottom contentte"
              style="padding-bottom:0;position: absolute; left: 0;"
              id="div"
            >
              <li @click="skDetail(item.id)" v-for="(item, index) in techerList" :key="index">
                <div class="teacher_name">
                  <div class="authorPhoto"><img :src="item.authorPhoto" alt /></div>
                  <div class="li_div_a">{{item.authorName}}</div>
                </div>
                <div v-if="item.ykSchool" class="School_name">{{item.ykSchool.name}}</div>
              </li>
            </ul>
            <!-- </div> -->
            <!-- </div> -->
          </div>
        </div>
        <div class="classfy_a" style="background:#363640;">
          <div class="flex a_top">
            <div class="left_line flex">
              <!-- <img src="../assets/liankao.png" alt class="liankao" /> -->
              各省统考/联考
            </div>
            <div class="right_more flex po">
              <div class="b_right_c flex">
                <p
                  v-for="(clist,cindex) in xuankelist"
                  :key="cindex"
                  @click="tong_list(clist.name,clist.id)"
                  :class="bxitem==clist.name?'b_right_c_p':''"
                >{{clist.name}}</p>
              </div>
            </div>
          </div>
          <!-- <div class="a_top_border"></div> -->
          <div class="b_address">
            <span>地<br>区</span>
            <div class="flex">
              <p
                v-for="(addresslist,adddressindex) in address"
                :key="adddressindex"
                @click="chooseadd(addresslist.addname)"
                :class="addressC==addresslist.addname?'addBg':''"
              >{{addresslist.addname}}</p>
            </div>
          </div>
          <!-- 联考二板块 -->
          <div class="b_second">
            <div class="b_sec_one">
              <div class="second_top flex">
                <img src="../assets/tong_hot_t.png" alt />                
                <p>统考热线推荐</p>
                <div class="right_more flex" @click="tohot(0)">
                  查看更多>>
                  <!-- <img src="../assets/goback.png" alt class="see_more" /> -->
                </div>
              </div>
              <ul>
                <li
                  v-for="(hotT,index) in listarry5"
                  :key="index"
                  class="hot_li flex"
                  @click="tohotDetail(0,hotT.id)"
                >
                  <div class="flex">
                    <!-- <p class="cycle"></p> -->
                    <p class="hidden" style="width:456px;">{{hotT.title}}</p>
                  </div>
                  <p>{{hotT.createtime}}</p>
                </li>
              </ul>
            </div>
            <div class="b_sec_two">
              <div class="second_top flex">
                <img src="../assets/tong_hot.png" alt />
                <p>统考热线关注</p>
              </div>
              <div class="hot_kou flex">
                <img src="../assets/exam_gong.png" alt @click="tozi(0,'2')" />
                <img src="../assets/exzm_gang.png" alt @click="tozi(0,'4')" />
                <img src="../assets/exam_jian.png" alt @click="tozi(0,'3')" />
                <img src="../assets/exam_msg.png" alt @click="tozi(0,'5')" />
                <img src="../assets/exam_zi.png" alt @click="tozi(0,'7')" />
                <img src="../assets/exam_ji.png" alt @click="tozi(0,'6')" />
              </div>
              <!-- 免费试听 -->
              <div class="second_top flex">
                <img src="../assets/tong_free_class.png" alt/>
                <p>统考课程免费试听</p>
                <div class="right_more flex" @click="allFree()">
                  查看更多>>
                  <img src="../assets/goback.png" alt class="see_more" />
                </div>
              </div>
              <div class="hot_free flex">
                <div class="hot_free_item" v-for="(class_list,index) in listarry_t_f"
                  :key="index"
                  @click="toDetail(class_list.id)">
                  <div class="ma"><img :src="class_list.photo" alt /></div>
                  <div class="model"><img src="../assets/play.png" alt=""></div>
                </div>
              </div>
            </div>
          </div>
          <div class="second_top flex" style="margin:0 13px;margin-top:30px;">
            <img src="../assets/tong_class.png" alt />
            <p>统考辅导课程</p>
            <div
              class="right_more flex"
              style="padding-bottom:12px;margin-right:10px"
              @click="allxuanke()"
            >
              查看更多>>
              <img src="../assets/goback.png" alt class="see_more" />
            </div>
          </div>
          <ul class="b_bottom">
            <li v-for="(list,index) in listarry_t" :key="index">
              <img :src="list.photo" alt @click="xkdetail(list.id)" />
              <div class="hidden b_bottom_a" @click="xkdetail(list.id)">{{list.title}}</div>
              <div
                class="b_bottom_b flex"
                @click="xkdetail(list.id)"
                style="width: 220px;justify-content: space-between;margin:0 auto;"
              >
                <div>¥{{list.price}}元</div>
                <div>定价{{list.dingjia}}元</div>
              </div>
              <div class="b_bottom_c flex" @click="addcar(list.id)">
                <!-- <img src="../assets/car_red.png" alt /> -->
                加入购物车
              </div>
            </li>
          </ul>
          <div class="second_top flex" style="margin:0 13px;margin-top:30px;">
            <img src="../assets/tong_book.png" alt />
            <p>统考辅导图书</p>
            <div
              class="right_more flex"
              style="padding-bottom:12px;margin-right:10px"
              @click="alltushu()"
            >
              查看更多>>
              <img src="../assets/goback.png" alt class="see_more" />
            </div>
          </div>
          <ul class="c_bottom">
            <div class="box"> 
              <li v-for="(list,index) in listarry_t_t" :key="index">
                <img :src="list.photo" alt @click="tsdetail(list.id)" />
                <div class="hidden b_bottom_a" @click="tsdetail(list.id)"
                >{{list.title}}</div>
                <div class="b_bottom_b flex" @click="tsdetail(list.id)">
                  <div>¥{{list.price}}元</div>
                  <div>{{list.buyNum}}人购买</div>
                  <!-- <div>定价{{list.dingjia}}元</div> -->
                </div>
                <!-- <div class="c_bottom_d flex">
                  <el-rate
                    v-model="list.star"
                    disabled
                    :colors="['#fc7023', '#fc7023', '#fc7023']"
                    disabled-void-color="#999"
                  ></el-rate>
                  <div>{{list.buyNum}}人购买</div>
                </div> -->
                <div class="b_bottom_c flex" style="width:204px;" @click="addcar(list.id)">
                  <!-- <img src="../assets/car_red.png" alt /> -->
                  加入购物车
                </div>
              </li>
            </div>
          </ul>
        </div>
        <div class="classfy_a" style="padding-top:29px;background:#363640;margin-top:30px;">
          <div class="flex a_top">
            <div class="left_line flex">
              <!-- <img src="../assets/school_home.png" alt class="liankao" /> -->
              名校校考
            </div>
            <div class="right_more flex po">
              <div class="b_right_c flex">
                <p
                  v-for="(clist,cindex) in xuankelist"
                  :key="cindex"
                  @click="xiao_list(clist.name,clist.id)"
                  :class="xkitem==clist.name?'b_right_c_p':''"
                >{{clist.name}}</p>
              </div>
            </div>
          </div>
          <div class="a_top_border"></div>
          <div class="b_address">
            <span>学<br>校</span>
            <div class="flex">
              <p
                v-for="(Slist,index) in school_list"
                :key="index"
                @click="chooseS(Slist.name,Slist.id)"
                :class="active_school==Slist.name?'addBg':''"
              >{{Slist.name}}</p>
            </div>
          </div>
          <!-- 校考二板块 -->
          <div class="b_second">
            <div class="b_sec_one">
              <div class="second_top flex">
                <img src="../assets/tong_hot_t.png" alt />
                <p>校考热点推荐</p>
                <div class="right_more flex" style="padding-bottom:12px;" @click="tohot(1)">
                  查看更多>>
                  <img src="../assets/goback.png" alt class="see_more" />
                </div>
              </div>
              <ul>
                <li
                  v-for="(hotT,index) in listarry6"
                  :key="index"
                  class="hot_li flex"
                  @click="tohotDetail(1,hotT.id)"
                >
                  <div class="flex">
                    <!-- <p class="cycle"></p> -->
                    <p class="hidden" style="width:456px;">{{hotT.title}}</p>
                  </div>
                  <p>{{hotT.createtime}}</p>
                </li>
              </ul>
            </div>
            <div class="b_sec_two">
              <div class="second_top flex">
                <img src="../assets/tong_hot.png" alt />
                <p>校考热点关注</p>
              </div>
              <div class="hot_kou flex">
                <img src="../assets/exam_gong.png" alt @click="tozi(1,'2')" />
                <img src="../assets/exam_jian.png" alt @click="tozi(1,'3')" />
                <img src="../assets/exzm_gang.png" alt @click="tozi(1,'4')" />
                <img src="../assets/exam_msg.png" alt @click="tozi(1,'5')" />
                <img src="../assets/exam_ji.png" alt @click="tozi(1,'6')" />
                <img src="../assets/exam_zi.png" alt @click="tozi(1,'7')" />
              </div>
              <div class="second_top flex">
                <img src="../assets/tong_free_class.png" alt />
                <p>校考课程免费试听</p>
                <div class="right_more flex" style="padding-bottom:12px;" @click="allFree()">
                  查看更多>>
                  <img src="../assets/goback.png" alt class="see_more" />
                </div>
              </div>
              <div class="hot_free flex">
                <div class="hot_free_item" v-for="(class_list,index) in listarry_x_f"
                  :key="index"
                  @click="toDetail(class_list.id)">
                  <div class="ma"><img :src="class_list.photo" alt /></div>
                  <div class="model"><img src="../assets/play.png" alt=""></div>
                </div>
              </div>
            </div>
          </div>
          <div class="second_top flex" style="margin:0 13px;margin-top:30px;">
            <img src="../assets/tong_class.png" alt />
            <p>校考辅导课程</p>
            <div
              class="right_more flex" @click="allxuanke()"
            >
              查看更多>>
              <img src="../assets/goback.png" alt class="see_more" />
            </div>
          </div>
          <ul class="b_bottom">
            <li v-for="(list,index) in listarry_x" :key="index">
              <img :src="list.photo" alt @click="xkdetail(list.id)" />
              <div class="hidden b_bottom_a" @click="xkdetail(list.id)">{{list.title}}</div>
              <div
                class="b_bottom_b flex"
                @click="xkdetail(list.id)"
                style="width: 220px;justify-content: space-between;margin:0 auto;"
              >
                <div>¥{{list.price}}元</div>
                <div>定价{{list.dingjia}}元</div>
              </div>
              <div class="b_bottom_c flex" @click="addcar(list.id)">
                <!-- <img src="../assets/car_red.png" alt /> -->
                加入购物车
              </div>
            </li>
          </ul>
          <div class="second_top flex" style="margin:0 13px;margin-top:30px;">
            <img src="../assets/tong_book.png" alt />
            <p>校考辅导图书</p>
            <div
              class="right_more flex"
              style="padding-bottom:12px;margin-right:10px"
              @click="alltushu()"
            >
              查看更多>>
              <img src="../assets/goback.png" alt class="see_more" />
            </div>
          </div>
          <ul class="c_bottom">
            <div class="box">
              <li v-for="(list,index) in listarry_x_t" :key="index">
                <img :src="list.photo" alt @click="tsdetail(list.id)" />
                <div
                  class="hidden b_bottom_a" @click="tsdetail(list.id)"
                >{{list.title}}</div>
                <!-- <div class="b_bottom_b flex" @click="tsdetail(list.id)">
                  <div>¥{{list.price}}元</div>
                  <div>定价{{list.dingjia}}元</div>
                </div> -->
                <div class="c_bottom_d flex" style="margin-top:3px;margin-bottom:9px;">
                  <!-- <el-rate
                    v-model="list.star"
                    disabled
                    :colors="['#fc7023', '#fc7023', '#fc7023']"
                    disabled-void-color="#999"
                  ></el-rate> -->
                  <div>¥{{list.price}}元</div>
                  <div>{{list.buyNum}}人购买</div>
                </div>
                <div class="b_bottom_c flex" style="width:204px;" @click="addcar(list.id)">
                  <!-- <img src="../assets/car_red.png" alt /> -->
                  加入购物车
                </div>
              </li>
            </div>
          </ul>
        </div>
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import address from "../../static/address";
import Appheader from "./header";
import Appfooter from "./footer";
import {
  rotationChart,
  ykAuthorlist,
  Professionallist,
  ykGoodslist,
  mationlist,
  addcar,
  ykSchoollist
} from "../api/index.js";
import $ from "jquery";
export default {
  props: {},
  data() {
    return {
      address: address,
      ymname: "首页",
      swiper: [], //轮播图
      xuankelist: [],
      choose_id: "", //校考分类id
      xkitem: "", //校考分类默认选中全部
      bxitem: "", //统考分类默认选中全部
      choose_id3: "", //统考分类id
      listarry_x_t: [], //统考图书list
      listarry_t_t: [], //校招图书list
      listarry3: [], //头条list
      listarry_t: [], //tongkao班型
      listarry_x: [], //t校招班型
      listarry_x_f: [], //t校招免费试听
      listarry_t_f: [], //统考免费试听
      listarry5: [], //统考热点
      listarry6: [], //校招热点
      loading: true,
      techerList: [],
      addressC: "全国", //联考默认选择
      school_list: [], //校招学校列表
      active_school: "全部", //选择的学校
      active_Sid: "", //选择的学校的id
      timers: null
    };
  },
  computed: {},
  activated() {},
  created() {},
  mounted() {
    setTimeout(() => {
      let li_width=$('#div li').width();
      let i = 7;
      this.timers = setInterval(() => {
        i--;
        let left = i + "px";
        $("#div li:first").css("marginLeft", left);
        if (-i > li_width) {
          $("#div li:first").css({ marginLeft: 7 }).appendTo($("#div"));
          i = 0;
          // clearInterval(this.timers);
        }
      }, 20);
    }, 1000);
    rotationChart()
      .then(res => {
        this.swiper = res.data.rows;
      })
      .catch(e => {});
    //教师
    let msg = {
      // pageSize: 6,
      // pageNum: 1
    };

    ykAuthorlist(this.qs(msg))
      .then(res => {
        this.techerList = [];
        this.techerList = res.data.rows;
      })
      .catch(e => {});
    //分类
    Professionallist()
      .then(res => {
        if (res.data.code == 0) {
          this.xuankelist = res.data.rows;
          this.bxitem = res.data.rows[0].name;
          this.xkitem = res.data.rows[0].name;
          this.choose_id3 = res.data.rows[0].id;
          this.choose_id = res.data.rows[0].id;
          //统考热点
          this.hot_tong();
          //校考热点
          this.hot_xiao();
        }
      })
      .catch(e => {});
    //头条
    let msg3 = {
      toutiao: 1,
      pageNum: 1,
      pageSize: 6
    };
    mationlist(this.qs(msg3))
      .then(res => {
        if (res.data.code == 0) {
          this.listarry3 = res.data.rows;
        }
      })
      .catch(e => {});
    //校招学校分类
    ykSchoollist()
      .then(res => {
        if (res.data.code == 0) {
          this.school_list = res.data.rows;
          this.school_list.unshift({
            id: "",
            name: "全部"
          });
        }
        // console.log(this.school_list)
      })
      .catch(e => {});
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timers);
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timers);
  },
  watch: {},
  methods: {
    //统考
    hot_tong() {
      let addrC;
      if (this.addressC == "全国") {
        addrC = "";
      } else {
        addrC = this.addressC;
      }
      let msg4 = {
        itype: 0,
        type: this.choose_id3,
        iaddr: addrC,
        toutiao: 1,
        pageNum: 1,
        pageSize: 11
      };
      mationlist(this.qs(msg4))
        .then(res => {
          if (res.data.code == 0 && res.data.rows.length != 0) {
            for (let i = 0; i < res.data.rows.length; i++) {
              res.data.rows[i].createtime = res.data.rows[i].createtime.split(
                " "
              )[0];
            }
          }
          this.listarry5 = res.data.rows;
          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
        });
      //统考班型列表
      let msg = {
        type: "1",
        pId: this.choose_id3,
        pageNum: 1,
        pageSize: 3,
        free: 0
      };
      ykGoodslist(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.listarry_t = res.data.rows;
          }
        })
        .catch(e => {});
      //统考tushu列表
      let msg2 = {
        type: "3",
        pId: this.choose_id3,
        pageNum: 1,
        pageSize: 3
      };
      ykGoodslist(this.qs(msg2))
        .then(res => {
          if (res.data.code == 0) {
            for (let i = 0; i < res.data.rows.length; i++) {
              res.data.rows[i].star = res.data.rows[i].star - 0;
            }
            this.listarry_t_t = res.data.rows;
          }
        })
        .catch(e => {});
      //统考免费试听
      let msg3 = {
        type: "2",
        pId: this.choose_id3,
        pageNum: 1,
        pageSize: 2,
        free: 1
      };
      ykGoodslist(this.qs(msg3))
        .then(res => {
          if (res.data.code == 0) {
            this.listarry_t_f = res.data.rows;
          }
        })
        .catch(e => {});
    },
    //校考
    hot_xiao() {
      let msg5 = {
        itype: 1,
        ischool: this.active_Sid,
        type: this.choose_id,
        pageNum: 1,
        pageSize: 11
      };
      mationlist(this.qs(msg5))
        .then(res => {
          if (res.data.code == 0) {
            for (let i = 0; i < res.data.rows.length; i++) {
              if (res.data.rows[i].createtime) {
                res.data.rows[i].createtime = res.data.rows[i].createtime.split(
                  " "
                )[0];
              }
            }
            this.listarry6 = res.data.rows;
          }
          this.loading = false;
        })
        .catch(e => {});
      //xiao考班型列表
      let msg = {
        type: "1",
        pId: this.choose_id,
        pageNum: 1,
        pageSize: 3,
        free: 0
      };
      ykGoodslist(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.listarry_x = res.data.rows;
          }
        })
        .catch(e => {});
      //校招tushu列表
      let msg2 = {
        type: "3",
        pId: this.choose_id,
        pageNum: 1,
        pageSize: 3
      };
      ykGoodslist(this.qs(msg2))
        .then(res => {
          if (res.data.code == 0) {
            for (let i = 0; i < res.data.rows.length; i++) {
              res.data.rows[i].star = res.data.rows[i].star - 0;
            }
            this.listarry_x_t = res.data.rows;
          }
        })
        .catch(e => {});
      //统考免费试听
      let msg3 = {
        type: "2",
        pId: this.choose_id,
        pageNum: 1,
        pageSize: 2,
        free: 1
      };
      ykGoodslist(this.qs(msg3))
        .then(res => {
          if (res.data.code == 0) {
            this.listarry_x_f = res.data.rows;
          }
        })
        .catch(e => {});
    },
    //校考分类切换
    xiao_list(item, id) {
      this.xkitem = item;
      this.choose_id = id;
      this.hot_xiao();
    },
    //统考分类切换
    tong_list(item, id) {
      this.bxitem = item;
      this.choose_id3 = id;
      this.hot_tong(); //热点切换
    },
    saw_more(num) {
      if (num == 1) {
        this.$router.push({
          name: "shoukeList"
        });
      }
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    xkdetail(id) {
      this.$router.push({
        name: "xuankeDetail",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    tsdetail(id) {
      this.$router.push({
        name: "tushuDetail",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    zxdetail(id) {
      sessionStorage.setItem("nowPage", "yikaozixunDetailPd");
      this.$router.push({
        name: "zixunDetail",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    skDetail(id) {
      this.$router.push({
        name: "guwenDetail",
        params: {
          id: id,
          name: "授课名师"
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    addcar(id) {
      if (localStorage.getItem("YKuserid")) {
        let msg = {
          userId: localStorage.getItem("YKuserid"),
          goodsId: id,
          booknum: 1
        };
        addcar(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            if (res.data.code == 0) {
              this.info = res.data.ykGoods;
              this.$refs.loginStatus.userDetail();
            }
          })
          .catch(e => {});
      } else {
        this.$refs.loginStatus.login();
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        return;
      }
    },
    //头部跳转
    homeitem(item) {
      if (item == "首页") {
        this.$router.push({
          name: "home"
        });
      } else if (item == "授课名师") {
        this.$router.push({
          name: "shoukeList"
        });
      } else if (item == "艺考图书") {
        this.$router.push({
          name: "tushuList"
        });
      } else if (item == "艺考选课") {
        this.$router.push({
          name: "xuankeList"
        });
      } else if (item == "免费试听") {
        this.$router.push({
          name: "callus"
        });
      } else if (item == "高校招生简章") {
        this.$router.push({
          name: "gaoxiaoList"
        });
      }
    },
    //专业
    listf(i, id, name) {
      this.$emit("cid", id);
      this.$router.push({
        name: "channel",
        params: {
          type: i,
          profationId: id,
          name: name
        }
      });
    },
    //联考地址
    chooseadd(addNmae) {
      this.addressC = addNmae;
      this.hot_tong();
    },
    //校招学校
    chooseS(name, id) {
      this.active_school = name;
      this.active_Sid = id;
      this.hot_xiao();
    },
    //免费视频
    toDetail(id) {
      this.$router.push({
        name: "keList",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //免费试听全部
    allFree() {
      this.$router.push({
        name: "callus"
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //课程全部
    allxuanke() {
      this.$router.push({
        name: "xuankeList"
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //图书全部
    alltushu() {
      this.$router.push({
        name: "tushuList"
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //热点推荐全部
    tohot(i) {
      if (i == 0) {
        this.$router.push({
          name: "zixunList",
          params: {
            type: i, //判断 0 统考 1 校招
            profationId: this.choose_id3,
            name: this.bxitem,
            addr: this.addressC
          }
        });
      } else {
        this.$router.push({
          name: "zixunList",
          params: {
            type: i, //判断 0 统考 1 校招
            profationId: this.choose_id,
            name: this.xkitem,
            school: this.active_Sid
          }
        });
      }
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //热点推荐详情
    tohotDetail(i, id) {
      sessionStorage.setItem("nowPage", "yikaozixunDetailPd");
      if (i == 0) {
        this.$router.push({
          name: "zixunDetail",
          params: {
            type: i, //判断 0 统考 1 校招
            profationId: this.choose_id3,
            name: this.bxitem,
            id: id,
            addr: this.addressC
          }
        });
      } else {
        this.$router.push({
          name: "zixunDetail",
          params: {
            type: i, //判断 0 统考 1 校招
            profationId: this.choose_id,
            name: this.xkitem,
            id: id,
            school: this.active_Sid
          }
        });
      }
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //跳转资料
    tozi(i, name) {
      sessionStorage.setItem("nowPage", "yikaozixunDetailPd");
      if (i == 0) {
        this.$router.push({
          name: "zixunLists",
          params: {
            type: i, //判断 0 统考 1 校招
            profationId: this.choose_id3,
            name: this.bxitem,
            zixuntype: name,
            addr: this.addressC,
          }
        });
      } else {
        this.$router.push({
          name: "zixunLists",
          params: {
            type: i, //判断 0 统考 1 校招
            profationId: this.choose_id,
            name: this.xkitem,
            zixuntype: name,
            school: this.active_Sid
          }
        });
      }
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    to_img_detail(photo){
      if(photo){
        this.$router.push({
        name:'gaoxiaoList_detail',
        params:{
          photo:photo
        }
      })
      }
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
#warp {
  width: 1200px;
}
/* .contentte{width: 1000%;position: absolute;left:0;top:0;}
		.contentte li{width:300px;height: 200px;float: left;} */
.home {
  background: #262630;
}
.home_content {
  width: 1200px;
  margin: 0 auto;
}
.home_swiper {
  width: 610px;
  height: 283px;
  border-radius: 6px;
}
.home_swiper >>> .el-carousel__container {
  height: 283px !important;
  border-radius: 6px;
}
.swiper_url {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  cursor: pointer;
}
.home_swiper >>> .el-carousel__button {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
}
.home_swiper >>> .is-active button {
  background-color: #bca545;
}
.classfiy_home {
  width: 1200px;
  margin: 0 auto;
}
/* content */
.classfy_a {
  padding-top: 21px;
}
.classfy_a >>> .el-carousel__container {
  height: 350px !important;
}
.a_top {
  justify-content: space-between;
  padding-left: 10px;
  position: relative;
  padding-bottom: 20px;
}
.a_top2 {
  padding-right: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #444750;
  margin-bottom: 20px;
}
.line {
  width: 4px;
  height: 23px;
  background: #c9a750;
  margin-right: 6px;
}
.left_line {
  font-size: 24px;
  color: #c6a44d;
}
.mingshi {
  width: 28px;
  height: 22px;
  margin-right: 5px;
}
.liankao {
  width: 22px;
  height: 25px;
  margin-right: 5px;
}
.right_more {
  font-size: 14px;
  color: #a9aabe;
  cursor: pointer;
}
.po {

}
.see_more {
  width: 8px;
  height: 13px;
  margin-left: 6px;
}
li {
  cursor: pointer;
}
.a_bottom {
  /* justify-content: flex-start; */
  padding-bottom: 47px;
  overflow: hidden;
}
.a_bottom > li:hover {
  /* border: 1px solid #434530; */
}
.a_bottom > li {
  
  box-sizing: border-box;
  margin-left: 15px;
}
/* .a_bottom > li:nth-child(7) {
  margin-left: 0px !important;
} */

.teacher_name {
  position: relative;
}
.teacher_name .authorPhoto{
  border: 1px solid #434530;
  border-radius: 189px;
  padding:15px;
  overflow: hidden;
  box-sizing: border-box;
  width: 189px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teacher_name .authorPhoto img {
  width: 189px;
  height: 260px;
  border-radius: 189px;
  box-sizing: border-box;
  border:10px solid #272532;
}
.li_div_a {
  /* position: absolute;
  bottom: 0px; */
  width: 100%;
  height: 49px;
  line-height: 49px;
  text-align: center;
  font-size: 18px;
  color: #abadbc;
}
.a_bottom .School_name {
  font-size: 16px;
  color: #7e7f93;
  text-align: center;
  /* padding-top: 21px;
  padding-bottom: 19px; */
}
.b_right_c {
  position: relative;
  cursor: pointer;
}
.b_right_c > p {
  font-size: 16px;
  box-sizing: border-box;
  padding:0 10px;
}
.a_top_border {
  margin-bottom: 26px;
  position: relative;
  z-index: 888;
}
.b_right_c_p {
  line-height: 60px;
  color: #c8a94f;
  background: url(../assets/nav_active_bg.png) no-repeat;
  background-position: center center;
}
/* 联考地址 */
.b_address {
  width: 1179px;
  display: flex;
  margin: 0 auto;
  border:1px solid #444750;
  box-sizing: border-box;
}
.b_address > span {
  width:25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #acadbf;
  font-weight: bold;
  font-size: 16px;
  border-right: 1px solid #444750;
  padding:0 7px;
}

.b_address > div {
  flex-wrap: wrap;
  flex:1;
  display: flex;
  align-items: center;
  padding:10px 15px;
  box-sizing: border-box;
}
.b_address p {
  line-height: 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  margin:2px 2px;
  color: #acadbf;
  padding:0 10px;
}
.b_address p:hover {
  color: #c7a750;
}
.addBg {
  color: #c7a750;
  border:1px solid #c7a750;
  border-radius: 20px;
}
/* 联考二板块 */
.b_second {
  display: flex;
  margin-top: 27px;
}
.b_sec_one {
  width: 570px;
  margin-left: 12px;
  margin-right: 25px;
}
.second_top {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.second_top > p{
  font-size: 18px;
  color: #fff;
  flex:1;
}
.second_top > img {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.hot_li {
  justify-content: space-between;
  margin-top: 20px;
}
.hot_li p {
  color: #aaacb9;
  font-size: 14px;
}
.hot_li:hover p {
  color: #bca545;
}
.b_sec_two {
  width: 582px;
}
.hot_kou {
  flex-wrap: wrap;
  margin-top: 35px;
  margin-bottom: 20px;
}
.hot_kou > img {
  width: 186px;
  margin-right: 9px;
  margin-bottom: 8px;
  cursor: pointer;
}
.hot_kou > img:nth-child(3n),
.hot_free > img:nth-child(3n) {
  margin-right: 0px !important;
}
.hot_free {
  margin-top: 14px;
  display: flex;
}
.hot_free .hot_free_item{
  width: 285px;
  height: 167px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.hot_free .hot_free_item .ma img {
  width: 285px;
  margin-right: 8px;
  cursor: pointer;
}
.hot_free .hot_free_item .model{
  position: absolute;
  left:50%;
  top:50%;
  background: rgba(0,0,0,0.5);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left:-30px;
  margin-top: -30px;
}
.b_bottom li {
  width: 344px;
  margin-bottom: 16px;
  margin-right: 30px;
  box-sizing: border-box;
}
.b_bottom li:nth-child(3n) {
  margin-right: 0px;
}
.b_bottom li > img {
  width: 100%;
  /* height: 200px; */
  border-radius: 20px;
}
.b_bottom > li:hover {
  /* border: 1px solid #ff0000; */
}
.b_bottom_a {
  width: 268px;
  margin: 0 auto;
  font-size: 16px;
  color: #b7b6bb;
  margin-top: 35px;
  margin-bottom: 15px;
}
.b_bottom_b {
  padding:15px 0;
  width: 204px;
  margin:0 auto;
}
.b_bottom_b > div {
  font-size: 14px;
}
.b_bottom_b > div:first-child {
  color: #c6a74d;
  margin-right: 5px;
  font-size: 18px;
}
.b_bottom_b > div:last-child {
  color: #999;
  text-decoration: line-through;
}
.b_bottom_c {
  width: 268px;
  height: 36px;
  border: 1px solid #444750;
  margin: 0 auto;
  justify-content: center;
  margin-top: 15px;
  color: #7b7c91;
  font-size: 14px;
  border-radius: 36px;
}
.b_bottom_c > img {
  width: 14px;
  height: 12px;
  margin-right: 4px;
}
.c_bottom{
  padding-bottom: 50px;
}
.c_bottom .box{
  padding:0 20px;
  box-sizing: border-box;
  width: 100%;
  background:url(../assets/home_book_bg.png) no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
}
.c_bottom .box,
.c_bottom,
.b_bottom,
.a_bottom {
  display: flex;
  flex-direction: row;
}

.c_bottom,
.b_bottom {
  padding-left:35px;
  padding-right: 35px;
  margin-top: 25px;
}
.c_bottom li {
  width: 344px;
  /* padding:12px 30px 30px 30px; */
  margin-bottom: 28px;
  box-sizing: border-box;
  cursor: pointer;
}
.c_bottom li:nth-child(3n) {
  margin-right: 0px !important;
}
.c_bottom li img {
  width: 260px;
  /* height: 260px; */
  border-radius: 20px;
  margin: 0 auto;
  margin-left: 67px;
}
.c_bottom li:hover {
  /* border: 1px solid #f20c01; */
}
.c_bottom_d {
  padding:15px 0;
  width: 204px;
  margin:0 auto;
}
.c_bottom_d > div {
  color: #999;
  font-size: 14px;
}
.c_bottom_d > div:first-child {
  color: #c6a74d;
  margin-right: 5px;
  font-size: 18px;
}
.c_bottom_d > div:last-child {
  color: #999;
  text-decoration: line-through;
}
/* 导航 */
.navleft {
  width: 175px;
  
}
.navleft > p {
  width: 175px;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  padding:15px 0;
  text-align: center;
  justify-content: center;
}
.navleft > p > img {
  width: 175px;
  height:45px;
}
.f_ul {
  /* height: 300px; */
  border-radius: 10px;
  background: #363640;
  padding:1px 15px;
  box-sizing: border-box;
  overflow: hidden;
}
.f_ul > div{
  border-bottom: 1px solid #5a5c73;
  padding:14px 0;
}
.f_ul > div:last-child{
  border-bottom: 0;
}
.f_ul > div > p {
  font-size: 16px;
  font-weight: bold;
  color: #c3a84d;
  line-height: 40px;
}
.f_ul > div > img {
  width: 98px;
  height: 5px;
  margin: 0 auto;
}
.over_li,
.out_hidden {
  width: 175px;
  height: 115px;
}
.out_hidden {
  position: relative;
  overflow: hidden;
  height: 72px;
}
.over_hidden {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
  display: none;
}
.f_ul li {
  font-size: 16px;
  color: #aaacbb;
  line-height: 36px;
}
.f_ul li:hover {
  color: #c9a750;
}
.navright {
  margin-left: 23px;
}
.home_nav_tou {
  display: flex;
}
.home_nav {
  /* width: 980px; */
  justify-content: flex-end;
  font-size: 18px;
  color: #333;
  border-bottom: 2px solid #eeee;
  cursor: pointer;
  /* padding-right: 100px; */
}
.home_nav > div {
  width: 144px;
  height: 60px;
  padding-bottom: 15px;
  text-align: center;
  line-height: 60px;
  color: #fff;
}
.home_nav > div:hover {
  color: #c8a94f;
}
.home_nav > div.active {
  color: #c8a94f;
  background: url(../assets/nav_active_bg.png) no-repeat;
  background-position: center center;
}
.tou_news {
  margin-left: 20px;
}
.tou_news .top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tou_news .top p{
  color: #a9abb8;
  font-size: 12px;
}
.tou_news > img {
  width: 80px;
  height: 20px;
}
.cycle {
  width: 5px;
  height: 5px;
  background: #c9a750;
  border-radius: 50%;
  margin-left: 2px;
  margin-right: 7px;
}

.news_con div {
  margin-top: 20px;
  cursor: pointer;
}
.news_con p {
  width: 346px;
  font-size: 16px;
  color: #acaebb;
}
.news_con p:hover {
  color: #c6a852;
}
</style>
